
<template>
	<view >		
		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">账单明细</block>				
			</cu-custom>
			<!-- list列表 -->
			<view style="padding: 0 10px 0  10px;">			
			<view class="cu-list menu" >
				
				<view class="cu-item animation-slide-bottom" style="margin-top: 10px;" :style="[{animationDelay: '0.1s'}]">
					<view class="content">
						<text class="text-grey">总费用</text>
					</view>
					<view class="action">
						<view class="text-red" style="font-size: 32upx;">{{ feeData.feeMoney}}</view>
					</view>
				</view>
			</view>	
			<view class="cu-list menu">	
				
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
					<view class="content">
						<text class="text-grey">缴费账号</text>
					</view>
					<view class="action">
						<text class="text-grey">{{feeData.accCode}}</text>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.3s'}]">
					<view class="content">
						<text class="text-grey">用户姓名</text>
					</view>
					<view class="action">
						<text class="text-grey">{{feeData.accName}}</text>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.4s'}]">
					<view class="content">
						<text class="text-grey">查询月份</text>
					</view>
					<view class="action">
						<text class="text-grey">{{feeData.feeDate}}</text>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.5s'}]">
					<view class="content">
						<text class="text-grey">记录数</text>
					</view>
					<view class="action">
						<text class="text-grey">{{feeData.feeNumber}}</text>
					</view>
				</view>
			</view>
			
			<view class="cu-list menu" >
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.9s'}]">
					<view class="content">
						<text class="text-grey">账单明细</text>
					</view>					
				</view>
				
				
				<view class="cu-list menu" v-for="(item, index) in feeData.feeDetail" :key="index">							
				
					<view class="cu-item animation-slide-bottom" style="background-color:#e2f1ed" >
						<view class="content">
							<text class="text-grey">{{item.readMonth}}</text>
						</view>							
						<view class="action">
							<text class="text-grey">￥{{item.money}}</text>
						</view>
					</view>
				
					<uni-table ref="table" :loading="loading" border stripe
						emptyText="暂无更多数据"  >
						<uni-tr style="font-size: 12px;">
							<uni-th  align="center">户号</uni-th>
							<uni-th  align="center">户名</uni-th>
							<uni-th  align="center">月份</uni-th>
							<uni-th  align="center">起度</uni-th>
							<uni-th  align="center">止度</uni-th>
							<uni-th  align="center">水量</uni-th>
							<uni-th  align="center">水费</uni-th>
							<uni-th  align="center">污水费</uni-th>
							<uni-th  align="center">垃圾费</uni-th>						
							<uni-th  align="center">合计</uni-th>
						</uni-tr> 
						<uni-tr  style="text-align: center">
							<uni-td>
								<view align="center" class="name">{{item.accCode}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.accName}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.readMonth}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.beginScale}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.endScale}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.amount}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.sfMoney}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.wuMoney}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.ljMoney}}</view>
							</uni-td>							
							<uni-td>
								<view align="center" class="name">{{item.money}}</view>
							</uni-td>							
						</uni-tr>
					</uni-table>				
				</view>
			</view>	
		</view>

		</scroll-view>
	</view>
</template>

<script>
	import api from '@/api/api.js'	
	export default {
		components:{		    
		 },
		data() {
			return {
				toggleStatus: false,				
				loading: false,
				feeData:{
					feeMoney:'',
					accCode:'',
					accName:'',				
					feeDate:'',					
					feeNumber:'',
					feeDetail: []
				},
				feeParams:{},
				feeUrl:'/bl/blExpenses/getFeeBill',				
			};
		},
		onLoad() {
			// this.selectedIndexs = []
			// this.getData(1)				
		},
		created(){			
			console.log("this.$Route.query",this.$Route.query);
			this.feeParams=this.$Route.query;
			this.loadinfo();
		},
		methods: {			
			loadinfo(){
				console.log("query:",this.feeParams);				
				this.$http.get(this.feeUrl,{params:{accCode:this.feeParams.accCode,
						createTimeBegin: this.feeParams.createTimeBegin,
						createTimeEnd: this.feeParams.createTimeEnd}},
					).then(res=> {
					if (res.data.success) {
						this.feeData = res.data.result;
						this.feeData.feeDate=this.feeParams.createTimeBegin+"~"+this.feeParams.createTimeEnd
					}
				}).catch(e=>{
					console.log("请求错误",e)
				})
			},			
		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
	.uni-group {
		display: flex;
		align-items: center;
	}
	.padding0{
		padding: 0px;
	}
	.padding{
		padding: 15px;
	}
</style>
